<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
    <fieldset>
        <legend>验证完整的表单</legend>
        <p>
            <label for="name">探索家名字</label>
            <input id="name" name="name" type="text">
        </p>
        <p>
            <label for="rname">曾用名</label>
            <input id="rname" name="rname" type="text">
        </p>
        <p>
            <input type="radio" id="gender_male" value="m" name="gender"/> 男
            <input type="radio" id="gender_female" value="f" name="gender"/> 女
        </p>
        <p>
            <label for="height">身高</label>
            <input id="height" name="height" type="text">
        </p>
        <p>
            <label for="weight">体重</label>
            <input id="weight" name="weight" type="text">
        </p>
        <p>
            <label for="card_id">身份证号</label>
            <input id="card_id" name="card_id" type="text">
        </p>
        <p>
            <label for="address">家庭地址</label>
            <input id="address" name="address" type="text">
        </p>

        <p>
            <label for="birthday">出生年月</label>
            <input id="birthday" name="birthday" type="text">
        </p>
        <p>

            <input id="school" name="school" type="text">
        </p>
        <p>
            <label for="sign_up">报名期数</label>
            <select id="sign_up" name="sign_up" title="请选择报名期数" required>
                <option value="">报名期数</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </p>
        <p>
            <label for="contact_name">紧急联系人名字</label>
            <input id="contact_name" name="contact_name" type="text">
        </p>
        <p>
            <label for="contact_tel">紧急联络人电话</label>
            <input id="contact_tel" name="contact_tel" type="text">
        </p>

        <p>
            <label for="contact_tel">是否自愿</label>
            <input type="radio" id="is_voluntary1" value="m" name="is_voluntary" checked/> 是
            <input type="radio" id="is_voluntary2" value="f" name="is_voluntary"/> 否
        </p>
        <p>
            <label for="specialty">特长</label>
            <input id="specialty" name="specialty" type="text">
        </p>
        <p>
            <label for="health">健康状况</label>
            <input id="health" name="health" type="text" title="健康状况" required>
        </p>
        <p>
            <label for="blood_type">血型</label>
            <select id="blood_type" name="blood_type" title="请选择血型" required>
                <option value="">血型</option>
                <option value="a">1</option>
                <option value="b">2</option>
                <option value="c">3</option>
                <option value="d">3</option>
            </select>
        </p>
        <p>
            <label for="is_allergy">是否过敏</label>
            <input type="radio" id="is_allergy1" value="m" name="is_allergy"/> 是
            <input type="radio" id="is_allergy2" value="f" name="is_allergy" checked/> 否
        </p>
        <p>
            <label for="what_allergy">是什么药物过敏</label>
            <input id="what_allergy" name="what_allergy" type="text" title="是什么药物过敏">
        </p>
        <p>
            <label for="life_habit">是什么药物过敏</label>
            <textarea name="life_habit"></textarea>
        </p>
        <p>
            <label for="entrust">嘱托</label>
            <textarea name="entrust"></textarea>
        </p>
        <p>
            <label for="undergo">生活经历</label>
            <textarea name="undergo"></textarea>
        </p>
        <p>
            <input class="submit" type="submit" value="提交">
        </p>
    </fieldset>
</form>
<script>

    //检查是否为正整数
    $().ready(function () {
        // 只能输入[0-9]数字
        jQuery.validator.addMethod("isDigits", function (value, element) {
            return this.optional(element) || /^\d+$/.test(value);
        }, "只能输入0-9数字");
        $.validator.addMethod("isCardNo", function (value, element, params) {
            var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            return pattern.test(value);

        }, "必须为合法身份证");
        // 匹配汉字或字母
        jQuery.validator.addMethod("isChineseOrEngList", function (value, element) {
            return this.optional(element) || /^[a-zA-Z\u4e00-\u9fa5]+$/.test(value);
        }, "匹配汉字或英文");
        // 匹配中文(包括汉字和字符)
        $.validator.addMethod("isChineseChar", function (value, element) {
            console.log(value);
            return this.optional(element) || /^[a-zA-Z0-9\u0391-\uFFE5]+$/.test(value);
        }, "匹配中文(包括汉字和字符) ");
        // 手机号码验证
        jQuery.validator.addMethod("isMobile", function (value, element) {
            var length = value.length;
            return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
        }, "请正确填写您的手机号码。");
        // 字符验证，只能包含中文、英文、数字、下划线等字符。
        jQuery.validator.addMethod("stringCheck", function (value, element) {
            return this.optional(element) || /^[a-zA-Z0-9\u4e00-\u9fa5-_`,.;]+$/.test(value);
        }, "只能包含中文、英文、数字、下划线等字符");
        // 判断英文字符
        jQuery.validator.addMethod("isEnglish", function (value, element) {
            return this.optional(element) || /^[A-Za-z]+$/.test(value);
        }, "只能包含英文字符。");
        // 在键盘按下并释放及提交后验证提交表单
        $("#signupForm").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 50
                },
                rname: {
                    required: true,
                    minlength: 2,
                    maxlength: 50
                },
                gender: "required",
                height: {
                    required: true,
                    range: [10, 400]
                },
                weight: {
                    required: true,
                    range: [5, 500]
                },
                card_id: 'isCardNo',
                address: {
                    required: true,
                    rangelength: [10, 100],
                    isChineseChar: true
                },
                birthday: {
                    dateISO: true
                },
                school: {
                    required: true,
                    rangelength: [10, 40]

                },
                sign_up: {
                    required: true,
                    isDigits: true
                },
                contact_name: {
                    required: true,
                    minlength: 2,
                    isChineseOrEngList: true

                },
                contact_tel: {
                    required: true,
                    isMobile: true
                },
                is_voluntary: "required",
                specialty: 'stringCheck',
                health: 'stringCheck',
                blood_type: {
                    required: true,
                    isEnglish: true

                },
                is_allergy: "required",
                life_habit:'stringCheck',
                entrust:'stringCheck',
                undergo:'stringCheck'

            },
            messages: {
                name: "请输入您的探索家名字",
                rname: "请输入您的曾用名",
                gender: "请选择性别",
                height: {
                    required: "请输入身高",
                    range: '请输入身高[10-400]'
                },
                weight: {
                    required: "请输入身高",
                    range: '请输入体重[5-500]'
                },
                address: {
                    required: "请输入家庭地址",
                    rangelength: "输入长度必须介于 10 和 100之间的字符串（汉字算一个字符）"

                },
                birthday: {
                    dateISO: "必须输入正确格式 如：2009-06-23"

                },
                school: {
                    required: "请输入学校年级",
                    rangelength: "输入长度必须介于 10 和 40之间的字符串（汉字算一个字符）"
                },
                sign_up: {
                    required: "请选择报名期数"

                },
                contact_name: {
                    required: '请输入紧急联系人名字',
                    minlength: '最少两个字符'
                },
                contact_tel: {
                    required: "请选择正确的手机号"
                },
                is_voluntary: "请选择一个是或否",
                is_allergy: "请选择一个是或否"
            }
        });
    });
</script>
</body>
</html>